<template>
    <div class="users_container">
        <el-row type="flex" align="middle">
            <el-col :span="1" :offset="10">
                <i class="el-icon-user-solid"></i>
            </el-col>
            <el-col :span="3">
                <h1>用户列表</h1>
            </el-col>
            <el-col :span=4 :offset="5">
                <el-input
                    size="small"
                    placeholder="输入查询的用户名"
                    v-model="searchInput"
                    minlength=3
                    maxlength=20
                    :clearable="true"
                    @clear="getUsersList"
                    @keyup.native.enter="getUsersList"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="getUsersList"
                        size="mini"
                    >
                    </el-button>
                </el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span=22 :offset="1">
                <el-table
                    :data="usersList"
                    :border="true"
                    :stripe="true"
                    align="center"
                    class="usersTable"
                    height="42vh"
                >
                    <el-table-column
                        type="index"
                        width="50"
                    >
                        <template slot="header">
                            <el-tooltip content="添加用户" placement="top-end">
                                <el-button
                                    type="success"
                                    size="mini"
                                    icon="el-icon-plus"
                                    circle
                                    @click="openDialog"
                                >
                                </el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        v-for="item in tableinfo"
                        :key="item.index"
                        :prop="item.usersInfoItem"
                        :label="item.usersInfoTD"
                        :min-width="item.usersTDWith"
                        sortable
                    >
                    </el-table-column>
                    <el-table-column
                        label="创建时间"
                        min-width="198"
                        sortable
                    >
                        <template v-slot='showDate'>
                            {{showDate.row.create_time | getYMDHMS}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        :label="' \0 状态'"
                        min-width="74"
                        sortable
                    >
                        <template v-slot='infoData'>
                            <el-tooltip :content=" infoData.row.mg_state | showlogin" placement="top">
                                <el-switch
                                    v-model="infoData.row.mg_state"
                                    @change="mgStateChange(infoData.row)"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                >
                                </el-switch>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        min-width="136"
                    >
                    <template v-slot='idData'>
                        <el-button-group>
                            <el-tooltip content="修改信息" placement="top-end">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    size="mini"
                                    @click="openEditDialog(idData.row.id)"
                                >
                                </el-button>
                            </el-tooltip>
                            <el-tooltip content="分配角色" placement="top">
                                    <el-button
                                    type="warning"
                                    icon="el-icon-setting"
                                    size="mini"
                                    @click="openEditRoletDialog(idData.row.id,idData.row.username,idData.row.role_name)"
                                >
                                </el-button>
                            </el-tooltip>
                            <el-tooltip content="删除用户" placement="top-start">
                                    <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    size="mini"
                                    @click="askDeleteUser(idData.row.id,idData.row.username)"
                                >
                                </el-button>
                            </el-tooltip>
                        </el-button-group>
                    </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="22" :offset="1" style="margin-bottom: 15px">
                <hr/>
            </el-col>
        </el-row>
        <el-row >
            <el-col>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :hide-on-single-page="showPagination"
                    :current-page="nowpage"
                    :page-sizes="[5,7,10,15]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="usersnum">
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog 
            title="新增用户"
            :visible.sync="dialogFormVisible"
            width="35%"
            @close="closeResetDialog(false)"
        >
                <el-form 
                    :model="newUserForm"
                    :rules="newUserFormRules"
                    ref="newUserFormRef"
                    status-icon 
                    label-width="78px"
                >
                    <el-form-item label="用户名称" prop="newUserName">
                        <el-input v-model="newUserForm.newUserName" maxlength="10" show-word-limit clearable @keyup.native.enter="openInDialog"></el-input>
                    </el-form-item>
                    <el-form-item label="用户密码" prop="newUserPasswd">
                        <el-input type="password" v-model="newUserForm.newUserPasswd" show-password clearable @keyup.native.enter="openInDialog"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkUserPasswd">
                        <el-input type="password" v-model="newUserForm.checkUserPasswd" show-password clearable @keyup.native.enter="openInDialog"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="newUserPhoneNum">
                        <el-input v-model.number="newUserForm.newUserPhoneNum" clearable @keyup.native.enter="openInDialog"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱" prop="newUserEmail">
                        <el-input v-model="newUserForm.newUserEmail" clearable @keyup.native.enter="openInDialog"></el-input>
                    </el-form-item>
                    <el-form-item class="newFormButton">
                        <el-button type="primary" @click="openInDialog" size="small">提 交</el-button>
                        <el-button type="info" @click="closeResetDialog(true)" size="small">重 置</el-button>
                        <el-button @click="rememberNewForm" size="small">暂 存</el-button>
                    </el-form-item>
                    </el-form>
                    <el-dialog
                        width="25%"
                        title="核对新用户信息"
                        :visible.sync="innerVisible"
                        append-to-body
                        center
                    >
                        <el-descriptions :column="1" border>
                            <el-descriptions-item v-for="(item,value,index) in confirmNewUserIcon" :key="item">
                                <template slot="label">
                                        <i :class="value"></i>
                                        {{item}}
                                </template>
                                {{confirmNewUser[index]}}
                            </el-descriptions-item>
                        </el-descriptions>
                        <span slot="footer" class="dialog-footer">
                            <el-button type="success" @click="pushDialog">确 定 创 建</el-button>
                        </span>
                    </el-dialog>
        </el-dialog>
        <el-dialog 
            title="修改用户信息"
            :visible.sync="dialogEditVisible"
            width="32%"
            center
            @close="closeResetEditDialog(false)"
        >
            <el-form 
                :model="editInfoForm"
                :rules="editFormRules"
                ref="editFormRef"
                status-icon 
                label-width="82px"
                label-position="top"
            >
                <el-form-item>
                        <el-descriptions :column="1" border>
                            <el-descriptions-item>
                                <template slot="label">
                                        <i class="el-icon-user-solid"></i>
                                        用户名
                                </template>
                                {{beforEditName}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                        <i class='el-icon-phone'></i>
                                        当前电话号码
                                </template>
                                {{beforEditPhone}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                        <i class='el-icon-platform-eleme'></i>
                                        当前电子邮件
                                </template>
                                {{beforEditEmail}}
                            </el-descriptions-item>
                        </el-descriptions>
                </el-form-item>
                <el-form-item label="新电话号码" prop="editPhone">
                    <el-input v-model.number="editInfoForm.editPhone" @keyup.native.enter="checkEditDialog(beforEditId)" clearable></el-input>
                </el-form-item>
                <el-form-item label="新电子邮箱" prop="editEmail">
                    <el-input v-model="editInfoForm.editEmail" @keyup.native.enter="checkEditDialog(beforEditId)" clearable></el-input>
                </el-form-item>
                <el-form-item class="newFormButton">
                    <el-button type="primary" @click="checkEditDialog(beforEditId)" size="small">提 交</el-button>
                    <el-button type="info" @click="closeResetEditDialog(true)" size="small">重 置</el-button>
                    <el-button @click="rememberEditForm" size="small">暂 存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog 
            title="修改用户角色"
            :visible.sync="dialogRoleVisible"
            width="32%"
            center
            @close="editUserNewRole=''"
        >
            <el-form 
                status-icon 
                label-width="82px"
                label-position="top"
            >
                <el-form-item>
                    <el-descriptions :column="1" border>
                        <el-descriptions-item>
                            <template slot="label">
                                    <i class="el-icon-user-solid"></i>
                                    用户名
                            </template>
                            {{editRoleUserName}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                    <i class='el-icon-medal'></i>
                                    当前用户角色
                            </template>
                            {{editRoleUserRole}}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form-item>
                <el-form-item label="新用户角色">
                    <el-row>
                        <el-col :span="19">
                    <el-select
                        clearable
                        size="small"
                        placeholder="请选择新用户角色"
                        v-model="editUserNewRole">
                        <el-option
                        v-for="item in selectNewRoles"
                        :key="item.id"
                        :label="item.roleName"
                        :value="item.id"
                    ></el-option>
                    </el-select>
                        </el-col>
                        <el-col :span="4" :offset="1" class="newFormButton">
                        <el-button type="primary" size="small" @click="pushUserNewRole" @keyup.native.enter="pushUserNewRole">提 交</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>


<script>
export default({
    name:'userusers',
    data(){
        var checkPasswd = (rule, value, callback) => {
            if(value !== this.newUserForm.newUserPasswd) {
                callback(new Error('两次输入密码不一致！'));
            }else{
                callback();
            }
        };
        var checkPhoneNum = (rule, value, callback) => {
            if(value){
                let rePhoneNum =  /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
                if(rePhoneNum.test(value)){
                    callback();
                }else{
                    callback(new Error('请输入合理的电话号码！'));
                }
            }else{
                callback();
            }
        };
        var checkEmail = (rule, value, callback) => {
            if(value){
                let reEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
                if(reEmail.test(value)){
                    callback();
                }else{
                    callback(new Error('请输入合理的电子邮箱！'));
                }
            }else{
                callback();
            }
        }

        return {
            searchInput:'',
            nowpage: 1,
            pagesize: 5,
            usersList: [],
            usersnum: 0,
            tableinfo : [
                {
                    usersInfoItem: 'id',
                    usersInfoTD: ' \0 用户ID',
                    usersTDWith: '84'
                },
                {
                    usersInfoItem: 'username',
                    usersInfoTD: ' \0 用户名',
                    usersTDWith: '88'
                },
                {
                    usersInfoItem: 'mobile',
                    usersInfoTD: ' \0 电话号码',
                    usersTDWith: '100'
                },
                {
                    usersInfoItem: 'email',
                    usersInfoTD: ' \0 电子邮箱',
                    usersTDWith: '170'
                },
                {
                    usersInfoItem: 'role_name',
                    usersInfoTD: ' \0 身份角色',
                    usersTDWith: '100'
                }
            ],
            showPagination: true,
            dialogFormVisible: false,
            innerVisible: false,
            dialogEditVisible: false,
            dialogRoleVisible: false,

            newUserForm:{
                newUserName: '',
                newUserPasswd: '',
                checkUserPasswd: '',
                newUserPhoneNum: '',
                newUserEmail: '',                
            },

            editRoleUserID: '',
            editRoleUserName: '',
            editRoleUserRole: '',
            editUserNewRole: '',

            selectNewRoles:[],

            beforEditId: '',
            beforEditName:'',
            beforEditPhone:'',
            beforEditEmail:'',

            editInfoForm:{
                editPhone: '',
                editEmail: ''
            },

            confirmNewUser:[],

            confirmNewUserIcon: {
                'el-icon-user-solid' : '用户名称',
                'el-icon-key' : '用户密码',
                'el-icon-phone' : '电话号码',
                'el-icon-platform-eleme' : '电子邮箱'
            },

            newUserFormRules:{
                newUserName:[
                    {
                        required: true,
                        message: '用户名不能为空！',
                        trigger: 'blur'
                    },
                    {
                        min: 3,
                        max: 10,
                        message: '用户名长度应在3至10字符之间！',
                        trigger: 'blur'
                    },
                ],
                newUserPasswd:[
                    {
                        required: true,
                        message: '密码不能为空！',
                        trigger: 'blur'
                    }
                ],
                checkUserPasswd:[
                    {
                        required: true,
                        message: '请再次确认密码！',
                        trigger: 'blur'
                    },
                    {
                        validator: checkPasswd,
                        trigger: 'blur'
                    }
                ],
                newUserPhoneNum:[
                    {
                        validator: checkPhoneNum,
                        trigger: 'blur'
                    }
                ],
                newUserEmail:[
                    {
                        validator: checkEmail,
                        trigger: 'blur'
                    }
                ],
            },
            editFormRules:{
                editPhone:[
                    {
                        validator: checkPhoneNum,
                        trigger: 'blur'
                    }
                ],
                editEmail:[
                    {
                        validator: checkEmail,
                        trigger: 'blur'
                    }
                ],
            }
        }
    },
    created(){
        this.getUsersList();
        this.checkPagination();
    },
    methods: {
        async getUsersList(){
            const { data: res } = await this.$http.get('users',{
                params:{
                    query: this.searchInput,
                    pagenum: this.nowpage,
                    pagesize: this.pagesize,
                }
            });
            if(res.meta.status == 200){
                this.usersList = res.data.users;
                this.usersnum = res.data.total;
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '获取用户列表失败！'
                    }
                )
            }
        },
        checkPagination(){
            if(this.usersnum>=this.pagesize){
                this.showPagination =false;
            }else{
                this.showPagination =true;
            }
        },
        handleSizeChange(value){
            this.pagesize = value;
            this.getUsersList();
            this.checkPagination();
        },
        handleCurrentChange(value){
            this.nowpage = value;
            this.getUsersList();
            this.checkPagination();
        },
        async mgStateChange(value){
             const { data: res } = await this.$http.put(`users/${value.id}/state/${value.mg_state}`);
            if(res.meta.status == 200){
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '修改用户状态成功'
                    }
                )
            }else{
                value.mg_state = !value.mg_state;
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '修改用户状态失败'
                    }
                )
            }
        },
        openDialog(){
            this.dialogFormVisible = !this.dialogFormVisible;
            const newUserFormStr = window.sessionStorage.getItem('newUserForm');
            if(newUserFormStr){
                this.newUserForm = Object.assign({},this.newUserForm,JSON.parse(sessionStorage.getItem('newUserForm')))
            }
        },
        closeResetDialog(flag){
            this.$refs.newUserFormRef.resetFields();
            if(flag){
                sessionStorage.removeItem('newUserForm');
            }
        },
        openInDialog(){
            this.$refs.newUserFormRef.validate((valid)=>{
                if(valid){
                    this.innerVisible = !this.innerVisible;
                    this.confirmNewUser[0] = this.newUserForm.newUserName;
                    this.confirmNewUser[1] = this.newUserForm.newUserPasswd;
                    if(this.newUserForm.newUserPhoneNum==''){
                        this.confirmNewUser[2] = '未填写'
                    }else{
                        this.confirmNewUser[2] = this.newUserForm.newUserPhoneNum;
                    }
                    if(this.newUserForm.newUserEmail==''){
                        this.confirmNewUser[3] = '未填写'
                    }else{
                        this.confirmNewUser[3] = this.newUserForm.newUserEmail;
                    }
                }else{
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            duration:2000,
                            message: '请纠正新增用户信息！'
                        }
                    );
                }
            })
        },
        rememberNewForm(){
            sessionStorage.setItem('newUserForm', JSON.stringify(this.newUserForm));
            if(sessionStorage.getItem('newUserForm')){
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '暂存信息成功！'
                    }
                );
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '暂存信息失败！'
                    }
                );
            }
        },
        async pushDialog(){
            const { data: res } = await this.$http.post('users',{
                username: this.newUserForm.newUserName,
                password: this.newUserForm.checkUserPasswd,
                mobile: this.newUserForm.newUserPhoneNum,
                email: this.newUserForm.newUserEmail
            });
            if(res.meta.status == 201){
                this.innerVisible = !this.innerVisible;
                this.closeResetDialog(true);
                this.dialogFormVisible = !this.dialogFormVisible;
                this.getUsersList();
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '用户'+this.confirmNewUser[0]+res.meta.msg
                    }                            
                )
            }else{
                this.innerVisible = !this.innerVisible;
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        duration:2000,
                        message: res.meta.msg
                    }                            
                )
            }
        },
        async openEditDialog(value){
            this.dialogEditVisible = true;
            this.beforEditId = value;
            const { data: res } = await this.$http.get('users/' + value)
            if(res.meta.status == 200){
                this.beforEditName = res.data.username;
                this.beforEditPhone = res.data.mobile;
                this.beforEditEmail = res.data.email;
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: res.meta.msg
                    }                            
                )                
            }
            const editFormStr = window.sessionStorage.getItem('editForm');
            if(editFormStr){
                this.editInfoForm = Object.assign({},this.editInfoForm,JSON.parse(sessionStorage.getItem('editForm')))
            }
        },
        closeResetEditDialog(flag){
            this.$refs.editFormRef.resetFields();
            if(flag){
                sessionStorage.removeItem('editForm');
            }
        },
        rememberEditForm(){
            sessionStorage.setItem('editForm', JSON.stringify(this.editInfoForm));
            if(sessionStorage.getItem('editForm')){
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '暂存信息成功！'
                    }
                );
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '暂存信息失败！'
                    }
                );
            }
        },
        checkEditDialog(value){
            this.$refs.editFormRef.validate(valid=>{
                if(valid){
                    if(
                        (
                            (this.beforEditPhone !='' && this.beforEditEmail !='') 
                            && 
                            (this.editInfoForm.editPhone == '' && this.editInfoForm.editEmail == '')
                        )
                        ||
                        (
                            (this.beforEditPhone !='' && this.beforEditEmail =='') 
                            && 
                            (this.editInfoForm.editPhone == '' && this.editInfoForm.editEmail == '')
                        )
                        ||
                        (
                            (this.beforEditPhone =='' && this.beforEditEmail !='') 
                            && 
                            (this.editInfoForm.editPhone == '' && this.editInfoForm.editEmail == '')
                        )
                    ){
                        this.$confirm('确定清除所有联系信息吗？', '清除提示', {
                                confirmButtonText: '继续',
                                cancelButtonText: '返回',
                                type: 'warning'
                            }).then(() => {
                                this.pushEditDialog(value);
                            this.$message({
                                center:true,
                                showClose: true,
                                type: 'success',
                                duration:2000,
                                message: '清除成功!'
                            });
                            }).catch(() => {
                                this.$message({
                                    center:true,
                                    showClose: true,
                                    duration:2000,
                                    message:'清除取消'
                                })
                            });
                    }else if(
                        (
                            (this.beforEditPhone !='' && this.beforEditEmail !='') 
                            && 
                            (this.editInfoForm.editPhone == '' && this.editInfoForm.editEmail != '')
                        )
                        ||
                        (
                            (this.beforEditPhone !='' && this.beforEditEmail =='') 
                            && 
                            (this.editInfoForm.editPhone == '' && this.editInfoForm.editEmail != '') 
                        )
                    ){
                        this.$confirm('建议保留电话方便联系', '清除电话号码提示', {
                                confirmButtonText: '继续',
                                cancelButtonText: '返回',
                                type: 'warning'
                            }).then(() => {
                                this.pushEditDialog(value);
                            this.$message({
                                center:true,
                                showClose: true,
                                type: 'success',
                                duration:2000,
                                message: '清除成功!'
                            });
                            }).catch(() => {
                                this.$message({
                                    center:true,
                                    showClose: true,
                                    duration:2000,
                                    message:'清除取消'
                                })
                            });
                    }else if(
                        (
                            (this.beforEditPhone !='' && this.beforEditEmail !='') 
                            && 
                            (this.editInfoForm.editPhone != '' && this.editInfoForm.editEmail == '')
                        )
                        ||
                        (
                            (this.beforEditPhone =='' && this.beforEditEmail !='') 
                            && 
                            (this.editInfoForm.editPhone != '' && this.editInfoForm.editEmail == '') 
                        )
                        ){
                        this.$confirm('建议保留电子邮件方便工作', '清除电子邮件提示', {
                                confirmButtonText: '继续',
                                cancelButtonText: '返回',
                                type: 'warning'
                            }).then(() => {
                                this.pushEditDialog(value);
                            this.$message({
                                center:true,
                                showClose: true,
                                type: 'success',
                                duration:2000,
                                message: '清除成功!'
                            });
                            }).catch(() => {
                                this.$message({
                                    center:true,
                                    showClose: true,
                                    duration:2000,
                                    message:'清除取消'
                                })
                            });
                    }else if(
                        (
                            (this.beforEditPhone =='' && this.beforEditEmail =='') 
                            && 
                            (this.editInfoForm.editPhone == '' && this.editInfoForm.editEmail == '')
                        )
                        ||
                        (
                            (this.beforEditPhone !='' && this.beforEditEmail !='') 
                            && 
                            (this.editInfoForm.editPhone != '' && this.editInfoForm.editEmail != '')
                            &&
                            (this.beforEditPhone == this.editInfoForm.editPhone && this.beforEditEmail == this.editInfoForm.editEmail)
                        )
                        ){
                            this.closeResetEditDialog(true)
                            return this.$message(
                                {
                                    center:true,
                                    showClose: true,
                                    duration:2000,
                                    message: '用户信息无变更！'
                                }
                            )
                    }else{
                        this.pushEditDialog(value);
                    }

                }else{
                    return this.$message(
                            {
                                center:true,
                                showClose: true,
                                duration:2000,
                                message: '请纠正修改用户信息！'
                            }
                        )
                }
            })
        },
        async pushEditDialog(value){
            const { data: res } = await this.$http.put('users/'+this.beforEditId,
            {
                mobile: this.editInfoForm.editPhone,
                email: this.editInfoForm.editEmail
            })
            if(res.meta.status == 200){
                this.closeResetEditDialog(true);
                this.openEditDialog(value);
                this.getUsersList();
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '修改用户'+this.beforEditName+'信息成功！'
                    }
                )
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '修改用户'+this.beforEditName+'信息失败！'
                    }
                )
            }
        },
        askDeleteUser(value1,value2){
            this.$confirm('<span style="color:red;font-weight:bold">注：删除操作不可逆！</span>'+'<br/>'+'请确认是否删除用户 '+value2,'删除用户提示', {
                confirmButtonText: '删除',
                cancelButtonText: '返回',
                type: 'warning',
                dangerouslyUseHTMLString: true
            }).then(() => {
                this.deleteUser(value1,value2);
            this.$message({
                center:true,
                showClose: true,
                type: 'success',
                duration:2000,
                message: '开始执行删除用户 '+value2
            });
            }).catch(() => {
                this.$message({
                    center:true,
                    showClose: true,
                    duration:2000,
                    message: '取消删除用户 '+value2
                })
            });
        },
        async deleteUser(value1,value2){
            const { data: res} = await this.$http.delete('users/'+ value1)
            if(res.meta.status == 200){
                if(this.usersList.length == 1){
                    this.nowpage = this.nowpage-1
                };
                this.getUsersList();
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '删除用户 '+value2+'成功！'
                    }
                )
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '删除用户 '+value2+'失败！'
                    }
                )
            }
        },
        async openEditRoletDialog(value1,value2,value3){
            this.editRoleUserID = value1;
            this.editRoleUserName = value2;
            this.editRoleUserRole = value3;
            const { data: res } = await this.$http.get('roles')
            if(res.meta.status == 200){
                this.selectNewRoles = res.data
            }
            this.dialogRoleVisible = !this.dialogRoleVisible
        },
        async pushUserNewRole(){
            if(this.editUserNewRole==''){
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            duration:2000,
                            message: '用户角色不能为空！'
                        }
                    )
            }else{
                const { data: res } = await this.$http.put(`users/${this.editRoleUserID}/role`,{rid: this.editUserNewRole});
                if(res.meta.status == 200){
                    this.getUsersList();
                    this.dialogRoleVisible = !this.dialogRoleVisible;
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            type: 'success',
                            duration:2000,
                            message: '修改用户 '+this.editRoleUserName+' 的角色成功'
                        }
                    )
                }else{
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            type: 'error',
                            duration:2000,
                            message: '修改用户 '+this.editRoleUserName+' 角色失败'
                        }
                    )
                }
            }
        }
    },
    filters:{
        //时间戳转精确到毫秒时间
        getYMDHMS (timestamp) {
            if(timestamp.toString().length==10){
                var time = new Date(timestamp*1000)
            }else{
                var time = new Date(timestamp)
            }
            let year = time.getFullYear()
            let month = (time.getMonth() + 1).toString().padStart(2, '0')
            let date = (time.getDate()).toString().padStart(2, '0')
            let hours = (time.getHours()).toString().padStart(2, '0')
            let minute = (time.getMinutes()).toString().padStart(2, '0')
            let second = (time.getSeconds()).toString().padStart(2, '0')
            return year + '年' + month + '月' + date + '日 ' + hours + '时' + minute + '分' + second + '秒'
        },
        showlogin(value){
            if(value){
                return '该用户状态：正常'
            }else{
                return '该用户状态：停用'
            }
        }
    }
})
</script>

<style lang="less" scoped>
    .users_container{
        width: 80vw;
        text-align: center;
        background-color: #fff;
        padding: 30px 8px;
        margin:4vh auto;
        border-radius: 15px;
        box-shadow: 0 1px 15px #cbcbcb;
        h1{
            color: #3a2c3b;
            letter-spacing: 6px;
        }
        hr{
            background-color: #2495e7;
            height: 1px;
        }
        .usersTable{
            width: 100%;
            margin: 20px 0 20px 0;
        }
        .newFormButton{
            text-align: right;
            margin:0;
        }
    }
</style>